<template>
  <div class="super-flow-base-demo">
    <super-flow
      class="flow"
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :graph-menu="graphMenuList"
      :node-menu="nodeMenuList"
      :link-menu="linkMenuList"
      :enter-intercept="enterIntercept"
      :output-intercept="outputIntercept"
      :link-desc="linkDesc"
      :linkBaseStyle="linkBaseStyle"
    >
      <template v-slot:node="{meta}">
        <div class="node-wrap">
          <i class="el-icon-video-play"></i>
          <div>{{ meta.name }}</div>
          
          <i class="el-icon-setting"></i>
          
        </div>
      </template>
    </super-flow>

    <el-dialog
      :title="drawerConf.title"
      :visible.sync="drawerConf.visible"
      :close-on-click-modal="false"
      width="500px">
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.node"
        ref="nodeSetting"
        :model="nodeSetting">
        <el-form-item
          label="节点名称"
          prop="name">
          <el-input
            v-model="nodeSetting.name"
            placeholder="请输入节点名称"
            maxlength="30">
          </el-input>
        </el-form-item>
        <el-form-item
          label="节点描述"
          prop="desc">
          <el-input
            v-model="nodeSetting.desc"
            placeholder="请输入节点描述"
            maxlength="30">
          </el-input>
        </el-form-item>
      </el-form>
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.link"
        ref="linkSetting"
        :model="linkSetting">
        <el-form-item
          label="连线描述"
          prop="desc">
          <el-input
            v-model="linkSetting.desc"
            placeholder="请输入连线描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button
          @click="drawerConf.cancel">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="settingSubmit">
          确 定
        </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import SuperFlow from 'vue-super-flow' 
import 'vue-super-flow/lib/index.css'


const drawerType = {
  node: 0,
  link: 1
}

export default {
  components: {SuperFlow},
  data () {
    return {
      drawerType,
      drawerConf: {
        title: '',
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf
          conf.visible = true
          conf.type = type
          conf.info = info
          if (conf.type === drawerType.node) {
            conf.title = '节点'
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
            this.$set(this.nodeSetting, 'name', info.meta.name)
            this.$set(this.nodeSetting, 'desc', info.meta.desc)
          } else {
            conf.title = '连线'
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
            this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
          }
        },
        cancel: () => {
          this.drawerConf.visible = false
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate()
          } else {
            this.$refs.linkSetting.clearValidate()
          }
        }
      },
      linkSetting: {
        desc: ''
      },
      nodeSetting: {
        name: '',
        desc: ''
      },

      origin: [0, 50],
      nodeList: [],
      linkList: [],

      graphMenuList: [
        [
          {
            label: '流程发起节点',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 148,
                height: 41,
                coordinate: coordinate,
                meta: {
                  prop: 'cc',
                  name: '流程发起节点'
                }
              })
            }
          },
          {
            label: '抄送节点',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
               width: 148,
                height: 41,
                coordinate: coordinate,
                meta: {
                  prop: 'cc',
                  name: '抄送节点'
                }
              })
            }
          },
          {
            label: '子流程',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 148,
                height: 41,
                coordinate: coordinate,
                meta: {
                  prop: 'cc',
                  name: '抄送节点'
                }
              })
            }
          },
          
        ]
      ],

      nodeMenuList: [
        [
          {
            label: '删除',
            disable: false,
            hidden (node) {
              return node.meta.prop === 'start'
            },
            selected (node, coordinate) {
              node.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            selected: (node, coordinate) => {
              this.drawerConf.open(drawerType.node, node)
            }
          }
        ]
      ],
      linkMenuList: [
        [
          {
            label: '删除',
            disable: false,
            selected: (link, coordinate) => {
              link.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            disable: false,
            selected: (link, coordinate) => {
              this.drawerConf.open(drawerType.link, link)
            }
          }
        ]
      ],
      linkBaseStyle:{
        color:'#0DB3A6'
      }
    }
  },
  created () {
    const nodeList = [
      {
        'id': 'nodeS3WgFnzCI15X58Qw',
        'width': 148,
        'height': 41,
        'coordinate': [500, 0],
        'meta': {
          'prop': 'start',
          'name': '流程发起节点'
        }
      },
      {
        'id': 'nodeni9QOqT3mI7hsMau',
        'width': 148,
        'height': 41,
        'coordinate': [500, 150],
        'meta': {
          'prop': 'condition',
          'name': '审批节点'
        }
      },
      {
        'id': 'nodeDhVU6w2KbEnJCjZs',
        'width': 148,
        'height': 41,
        'coordinate': [500, 300],
        'meta': {
          'prop': 'end',
          'name': '流程结束'
        }
      }
    ]
    const linkList = [
      {
        'id': 'linkcs9ZhumWeTHrtUy8',
        'startId': 'nodeS3WgFnzCI15X58Qw',
        'endId': 'nodeni9QOqT3mI7hsMau',
        'startAt': [0, 100],
        'endAt': [0, 0],
        'meta': null
      },
      {
        'id': 'linkhCKTpRAf89gcujGS',
        'startId': 'nodeni9QOqT3mI7hsMau',
        'endId': 'nodeDhVU6w2KbEnJCjZs',
        'startAt': [0, 200],
        'endAt': [0, 0],
        'meta': null
      }
    ]

    setTimeout(() => {
      this.nodeList = nodeList
      this.linkList = linkList
    }, 100)
  },
  mounted () {
    this.$nextTick(() => {
      this.$el.scrollBy({
        left: (this.$el.scrollWidth - this.$el.clientWidth) / 2,
        top: (this.$el.scrollHeight - this.$el.clientHeight) / 2
      })
    })
  },
  methods: {
    enterIntercept () {
      return true
    },
    outputIntercept (node) {
      return !(node.meta.prop === 'end')
    },
    linkDesc (link) {
      return link.meta ? link.meta.desc : ''
    },
    settingSubmit () {
      const conf = this.drawerConf
      if (this.drawerConf.type === drawerType.node) {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.nodeSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.nodeSetting[key])
        })
        this.$refs.nodeSetting.resetFields()
      } else {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.linkSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.linkSetting[key])
        })
        this.$refs.linkSetting.resetFields()
      }
      conf.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.node-wrap:hover{
  background: #e3f6ff;
  border: 1px solid #76bbeb;
}
.node-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  

  background-color: #f7f9fe;
  border: 1px solid #e1e3e5;


  width: 160px;
  height: 40px;
  padding: 0 10px;
  border-radius: 2px;
  div{
    width: 100px;
    font-size: 14px;
  }
 span{
  i{
    cursor: pointer;
  }
 }
}
.ellipsis {
  white-space   : nowrap;
  text-overflow : ellipsis;
  overflow      : hidden;
  word-wrap     : break-word;
}

.super-flow-base-demo {
  width            : calc(100vw - 300px);
  height           : calc(100vh - 160px);
  background-color : #f5f5f5;
  overflow         : scroll;

  .super-flow {
    width  : 100%;
    height : 100%;
  }

  .super-flow__node {
    .flow-node {
      > header {
        font-size   : 14px;
        height      : 32px;
        line-height : 32px;
        padding     : 0 12px;
        color       : #000;
      }

      > section {
        text-align  : center;
        line-height : 20px;
        overflow    : hidden;
        padding     : 6px 12px;
        word-break  : break-all;
      }

      &.flow-node-start {
        > header {
          background-color : #55abfc;
        }
      }

      &.flow-node-condition {
        > header {
          background-color : #BC1D16;
        }
      }
     
      &.flow-node-end {
        > header {
          background-color : rgb(176, 163, 163);
        }
      }
    }
  }
}
</style>